<template>
    <view :class="themeName">
        <view class="service">
            <!-- Contain -->
            <view class="service-contain">
                <view class="flex code row-center">
                    <u-image :src="ServiceConfig.qr_code" width="400rpx" height="400rpx"></u-image>
                </view>
                <view class="flex lg m-t-20 row-center">
                    {{ ServiceConfig.remarks }}
                </view>

                <view class="p-t-20">
                    <view class="br60 copy-btn flex row-center white lg">
                        <text class="m-l-20" @click="saveCode">保存二维码</text>
                    </view>
                </view>

                <view class="flex row-center xs p-t-20" v-if="ServiceConfig.business_time">
                    服务时间: {{ ServiceConfig.business_time }}
                </view>
                <view class="m-t-20 flex row-center xs" v-if="ServiceConfig.phone">
                    客服电话：{{ ServiceConfig.phone }}
                    <!-- #ifdef H5 -->
                    <a class="br60 m-l-10 phone muted" :href="'tel:' + ServiceConfig.phone">拨打</a>
                    <!-- #endif -->
                    <!-- #ifndef H5 -->
                    <view class="br60 m-l-10 phone muted" @click="showTelTips">拨打</view>
                    <!-- #endif -->
                </view>
            </view>
        </view>

        <u-modal
            :content="content"
            v-model="showPhoneCall"
            show-cancel-button
            confirm-text="呼叫"
            :confirm-color="themeColor"
            @confirm="onCall"
        >
        </u-modal>

        <loading-view v-if="loading"></loading-view>
    </view>
</template>

<script>
import { copy } from '@/utils/tools.js'
import { apiServiceConfig } from '@/api/store.js'
import { mapGetters, mapState } from 'vuex'

export default {
    name: 'Service',

    data() {
        return {
            serviceData: {},
            showPhoneCall: false,
            content: '即将打电话给',
            loading: true
        }
    },

    methods: {
        getServiceConfigDataFun() {
            apiServiceConfig()
                .then((res) => {
                    this.serviceData = res
                    //#ifndef H5
                    this.downloadCode()
                    //#endif
                    setTimeout(() => {
                        this.loading = false
                    }, 100)
                })
                .catch((err) => {
                    this.loading = false
                })
        },

        // 下载图片
        downloadCode() {
            uni.downloadFile({
                url: this.serviceData.qr_code, //仅为示例，并非真实的资源
                success: (res) => {
                    if (res.statusCode == 200) {
                        this.tempFilePath = res.tempFilePath
                    }
                }
            })
        },

        saveCode() {
            //#ifdef H5
            this.$toast({
                title: '长按图片保存'
            })
            //#endif
            //#ifndef H5
            uni.saveImageToPhotosAlbum({
                filePath: this.tempFilePath,
                success: (res) => {
                    this.$toast({
                        title: '保存成功',
                        icon: 'success'
                    })
                },
                fail: (err) => {
                    this.$toast({
                        title: '保存失败'
                    })
                }
            })
            //#endif
        },

        // 显示是否拨打电话弹窗
        showTelTips() {
            this.showPhoneCall = true
            this.content = '即将打电话给' + this.ServiceConfig.phone
        },

        //打电话
        onCall() {
            uni.makePhoneCall({
                phoneNumber: this.ServiceConfig.phone.toString()
            })
        }
    },

    computed: {
        ...mapGetters(['isLogin', 'ServiceConfig'])
    },

    onLoad() {
        this.getServiceConfigDataFun()
    }
}
</script>

<style lang="scss" scoped>
.service {
    width: 100vw;
    height: 100vh;
    background-image: url(../../static/images/service_bg.jpg);
    background-size: 100% auto;
    overflow: hidden;

    &-contain {
        width: 620rpx;
        height: 900rpx;
        margin: 68rpx auto;
        border-radius: 10px;
        background-color: #ffffff;

        .code {
            border-radius: 20rpx;
            padding-top: 60rpx;
        }

        .copy-btn {
            margin: 0 80rpx;
            height: 88rpx;
            @include background_linear(90deg, 0, 100%);
        }

        .phone {
            padding: 0 20rpx;
            text-decoration: underline;
        }
    }
}
</style>
